/**
 * @fileoverview
 */
module.exports = {
  // 浅色
  ".bg-material-thick": {
    background: "rgba(255,255,255,0.84)",
    backdropFilter: "saturate(0) blur(50px)",
  },
  ".bg-material": {
    background: "rgba(255,255,255,0.6)",
    backdropFilter: "saturate(21%) blur(50px)",
  },
  ".bg-material-thin": {
    background: "rgba(255,255,255,0.4)",
    backdropFilter: "saturate(45%) blur(50px)",
  },
  ".bg-material-ultrathin": {
    background: "rgba(255,255,255,0.12)",
    backdropFilter: "saturate(0) blur(30px)",
  },
  ".bg-material-nav": {
    background: "rgba(249,249,249,0.94)",
    backdropFilter: "saturate(100%) blur(20px)",
    boxShadow: "0 0.33 rgba(0,0,0,0.3)",
  },
  ".bg-material-tabbar": {
    background: "rgba(247,247,247,0.8)",
    backdropFilter: "saturate(100%) blur(20px)",
    boxShadow: "0 -0.5 rgba(0,0,0,0.3)",
  },
  // 深色
  ".bg-material-thick-dark": {
    background: "rgba(0,0,0,0.6)",
    backdropFilter: "saturate(0) blur(50px)",
  },
  ".bg-material-dark": {
    background: "rgba(0,0,0,0.41)",
    backdropFilter: "saturate(0) blur(50px)",
  },
  ".bg-material-thin-dark": {
    background: "rgba(0,0,0,0.26)",
    backdropFilter: "saturate(0) blur(50px)",
  },
  ".bg-material-ultrathin-dark": {
    background: "rgba(0,0,0,0.1)",
    backdropFilter: "saturate(0) blur(50px)",
  },
  ".bg-material-nav-dark": {
    background: "rgba(29,29,29,0.94)",
    backdropFilter: "saturate(30%) blur(20px)",
    boxShadow: "0 0.33 rgba(255,255,255,0.15)",
  },
  ".bg-material-tabbar-dark": {
    background: "rgba(22,22,22,0.8)",
    backdropFilter: "saturate(30%) blur(20px)",
    boxShadow: "0 -0.5 rgba(255,255,255,0.16)",
  },

  // fill
  ".bg-material-fill-primary": {
    background: "#636363",
    backdropFilter: "saturate(100%)",
  },
  ".bg-material-fill-secondary": {
    background: "#cfcfcf",
    backdropFilter: "saturate(60%)",
  },
  ".bg-material-fill-tertiary": {
    background: "#e6e6e6",
    backdropFilter: "saturate(48%)",
  },

  ".bg-material-fill-primary-dark": {
    background: "#616161",
    backdropFilter: "saturate(100%)",
  },
  ".bg-material-fill-secondary-dark": {
    background: "#262626",
    backdropFilter: "saturate(70%)",
  },
  ".bg-material-fill-tertiary-dark": {
    background: "#1a1a1a",
    backdropFilter: "saturate(65%)",
  },

  // separator
  ".bg-material-separator": {
    background: "rgba(17,17,17,0.50)",
    backdropFilter: "saturate(300%)",
  },
  ".bg-material-separator-dark": {
    background: "rgba(217,217,217,0.30)",
    backdropFilter: "saturate(40%)",
  },
};
